<template>
  <div>
    <el-collapse-transition name="el-fade-in">
      <div v-show="show">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 20px 20px -10px;">
          <el-tab-pane :label="item.groupName" v-for="item in groupList" :name="item.groupCode" :key="item.groupCode">
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-collapse-transition>
    <div style="margin-left: 20px; margin-right: 20px; margin-top: 10px">
      <search-vue ref="search" :userId="user_id" :role="role"/>
      <tableList ref="tableList" :role="role"/>
    </div>
  </div>
</template>
<script>
  import tableList from './table.vue'
  import SearchVue from './search.vue'
  import { getGroup } from '@/api/group'
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        'user_id',
        'role'
      ])
    },
    data() {
      return {
        show: true,
        activeName: '',
        groupList: []
      };
    },
    methods: {
      convertShow() {
        this.show = !this.show
      },
      handleClick() {
        this.groupList.forEach(element => {
          if (element.groupCode === this.activeName) {
            this.$refs.search.clickNew(element.groupId)
          }
        });
        // this.show = false
      },
      initData() {
        getGroup().then(response => {
          this.groupList = response
          this.groupList.forEach(e => {
            e.groupCode = ''+e.groupId
          })
          if (response.length>0) {
            this.activeName = response[0].groupCode
            this.handleClick(response[0])
          }
          this.show = false
        })
      }
    },
    components: {
      tableList,
      SearchVue
    },
    mounted: function init() {
      this.initData();
    }
  };

</script>
